﻿var page = new lg.page({
    data: {
        id: 0,
        items: [],
        ad: {},
        item: {}
    },
    mounted: function () {
        this.List();
    },
    methods: {
        GetAd: function () {

        },
        List: function () {
            layui.use(['table', 'element', 'upload'], function () {
                var table = layui.table;
                page.laytable = table.render({
                    elem: '#ADPicList'
                    , url: '/SysApi/GetAdItems/'
                    , toolbar: '#toolbar' //开启头部工具栏，并为其绑定左侧模板
                    , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                    , cols: [[
                        {
                            field: 'SubCount', title: '#', width: 60, templet: function (d) {
                                return d.LAY_TABLE_INDEX + 1
                            }
                        }
                        , { field: 'Title', title: '标题', width: 150 }
                        , {field: 'AdTitle', title: '广告位'}
                        , {field: 'SortNumber', title: '权重', width: 80}
                        , {
                            field: 'IsUsing', title: '是否启用', width: 100, align: "center", templet: function (d) {
                                return laySwitch.render(d.IsUsing, 'use')
                            }
                        }
                        , { fixed: 'right', title: '操作', toolbar: '#btTpl', width: 160 }
                    ]],
                    where: { id: AdId }
                });
                //头工具栏事件
                table.on('toolbar(ADPicList)', function (obj) {
                    var checkStatus = table.checkStatus(obj.config.id);
                    switch (obj.event) {
                        case 'addADPic':
                            loadTpl({
                                url: "/Lgm/AddAdItem",
                                target: "#floatBody"
                            })
                            return false;
                            break;
                        case 'refresh':
                            page.laytable.reload();
                            break;
                        case 'back':
                            top.location.href="/Lgm/Ad"
                    };
                });
                //监听行工具事件
                table.on('tool(ADPicList)', function (obj) {
                    var data = obj.data;
                    switch (obj.event) {
                        case 'del':
                            lg.request({
                                url: "/SysApi/DeleteAdItem",
                                method: "post",
                                data: { ids: data.Id },
                                success: function (d) {
                                    if (d.code == 0) {
                                        layer.msg("删除成功!", { icon: 1 });
                                        page.laytable.reload();
                                    } else {
                                        layer.msg(d.msg, { icon: 2 })
                                    }
                                }
                            });
                            break;
                        case 'edit':
                            page.item = data;
                            loadTpl({
                                url: "/Lgm/EditAdItem/" + data.Id,
                                target: "#floatBody"
                            })
                            break;
                        case 'use':
                            laySwitch.do({
                                obj: obj,
                                key: "IsUsing",
                                url: "/SysApi/EditAdItem",
                                refresh: true
                            })
                            break;
                    }
                });
            });
        },
        Add: function () {
            var form = layui.form;
            var upload = layui.upload;
            form.render();
           
            form.on("submit(AddAD)", function (d) {
                if (!d.field.IsUsing) {
                    d.field.IsUsing = 0
                }
                d.field.AdId = AdId;
                lg.request({
                    url: "/SysApi/AddAdItem",
                    data: d.field,
                    method: 'post',
                    success: function (d) {
                        if (d.code == 0) {
                            layer.msg("添加成功！", { icon: 1 });
                            page.back(true);
                        } else {
                            layer.msg(d.msg, { icon: 2 })
                        }
                    }
                })
                return false;
            })
            //拖拽上传
            upload.render({
                elem: '#upImg'
                , url: '/SysApi/SmallImgUpLoad' //改成您自己的上传接口
                , done: function (res) {
                    if (res.state) {
                        layer.msg('上传成功', { icon: 1 });
                        $(this.elem).find(".viewImg").html("<hr><img src='" + res.filePath + "' />");
                        $("#" + $(this.elem).data("target")).val(res.filePath);
                    } else {
                        layer.msg(res.msg, { icon: 2 })
                    }
                }
            });
            //拖拽上传
            upload.render({
                elem: '#upVideo'
                , url: '/SysApi/VideoUpLoad' //改成您自己的上传接口
                , done: function (res) {
                    if (res.state) {
                        layer.msg('上传成功', { icon: 1 });
                        $(this.elem).find(".viewImg").html("<hr><video src='" + res.filePath + "'></video");
                        $("#" + $(this.elem).data("target")).val(res.filePath);
                    } else {
                        layer.msg(res.msg, { icon: 2 })
                    }
                }
            });
        },
        Edit: function (id) {
            var form = layui.form;
            var upload = layui.upload;
            form.render();
            form.val("EditAdItemForm", this.item)
            if (!lg.string.IsNullOrEmpty(this.item.ImgUrl)) {
                $("#upImg .viewImg").html("<hr><img src='" + this.item.ImgUrl + "' />")
            }
            if (!lg.string.IsNullOrEmpty(this.item.VideoUrl)) {
                $("#upVideo .viewImg").html("<hr><img src='" + this.item.VideoUrl + "' />")
            }
            //拖拽上传
            upload.render({
                elem: '#upImg'
                , url: '/SysApi/SmallImgUpLoad' //改成您自己的上传接口
                , done: function (res) {
                    if (res.state) {
                        layer.msg('上传成功', { icon: 1 });
                        $(this.elem).find(".viewImg").html("<hr><img src='" + res.filePath + "' />");
                        $("#" + $(this.elem).data("target")).val(res.filePath);
                    } else {
                        layer.msg(res.msg, { icon: 2 })
                    }
                }
            });
            //拖拽上传
            upload.render({
                elem: '#upVideo'
                , url: '/SysApi/VideoUpLoad' //改成您自己的上传接口
                , done: function (res) {
                    if (res.state) {
                        layer.msg('上传成功', { icon: 1 });
                        $(this.elem).find(".viewImg").html("<hr><video src='" + res.filePath + "'></video");
                        $("#" + $(this.elem).data("target")).val(res.filePath);
                    } else {
                        layer.msg(res.msg, { icon: 2 })
                    }
                }
            });
            form.on("submit(EditAdItem)", function (d) {
                if (!d.field.IsUsing) {
                    d.field.IsUsing = 0
                }
                lg.request({
                    url: "/SysApi/EditAdItem",
                    data: d.field,
                    method: 'post',
                    success: function (d) {
                        if (d.code == 0) {
                            layer.msg("添加成功！", { icon: 1 });
                            page.back(true);
                        } else {
                            layer.msg(d.msg, { icon: 2 })
                        }
                    }
                })
                return false;
            })
        }
    }
})